import React,{useState} from 'react'
import { UserOutlined,NotificationOutlined,SettingOutlined,ShopOutlined } from '@ant-design/icons';
import { Layout, Menu,Affix} from 'antd';
import {Link} from 'react-router-dom';

const { SubMenu } = Menu;
const { Sider } = Layout;

const Navigation = () => {
  const [container, setContainer] = useState(null);
    return (
        <div ref={setContainer}>
          <Affix offsetTop={100}>
            <Sider className="site-layout-background" width={200}>
          <Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} style={{ height: '100%' }}>
            
            <Menu.Item key="1" icon={<UserOutlined />}><Link to="/">用户管理</Link></Menu.Item>
            <SubMenu key="sub2" icon={<ShopOutlined />} title="城市管理">
              <Menu.Item key="2"><Link to="/city/citycul">城市文化列表管理</Link></Menu.Item>
              <Menu.Item key="3"><Link to="/city/interest">景点推荐管理</Link></Menu.Item>
              <Menu.Item key="4"><Link to="/city/enviro">周边推荐管理</Link></Menu.Item>
              <Menu.Item key="5"><Link to="/city/food">美食推荐管理</Link></Menu.Item>
              <Menu.Item key="6"><Link to="/city/hotel">酒店推荐管理</Link></Menu.Item>
            </SubMenu>
            <Menu.Item key="8" icon={<SettingOutlined />}><Link to="/system">系统管理</Link></Menu.Item>
            
          </Menu>
        </Sider>
        </Affix>
        </div>
    )
}

export default Navigation
